<template>
  <div>
    <a @click="showModal">
      添加
    </a>
    <a-modal
      title="添加包厢信息"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="楼层名称">
            <a-input
              v-decorator="[
	                'floorall',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="楼层名称"
            />
          </a-form-item>
          <a-form-item label="包厢名称">
            <a-input
              v-decorator="[
	                'boxname',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="包厢名称"
            />
          </a-form-item>
          <a-form-item label="服务包厢名称">
            <a-input
              v-decorator="[
	                'boxservicetype',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="服务包厢名称"
            />
          </a-form-item>
          <a-form-item label="包厢功能描述">
            <a-textarea
              v-decorator="[
	                'boxservicedesc',
	                {rules: [{ required: false, message: '不能为空' }]}
	                ]"
              placeholder="请输入描述"></a-textarea>
          </a-form-item>
          <!--<a-form-item label="logo图片">
            <a-upload
              name="file"
              :multiple="true"
              action="http://localhost:8080/jeecg-boot/ltmjh/boxservice/savefile"
              :headers="headers"
              @change="handleChange"
            >
              <a-button> <a-icon type="upload" /> Click to Upload </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item label="介绍图片">
            <a-input/>
          </a-form-item>-->
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //ModalText: 'Content of the modal',
        form:this.$form.createForm(this),
        visible: false,
        confirmLoading: false,
        headers: {
          authorization: 'authorization-text',
        },
        filename:"",
      };
    },
    methods: {
      showModal() {
        this.visible = true;
      },
      handleOk(e) {
        console.log("点击了确定事件！");
        this.confirmLoading = true;
        e.preventDefault()//规定阻止e事件的默认动作。
        //获取表单信息
        this.form.validateFields((error, values) => {//获取form表单中的数据
          if (!error) {//当没有错误时调用提交方法
            console.log('values',values);
            console.log("文件名称为："+this.filename);
            this.axios({
              method:"post",
              url:"/ltmjh/boxservice/savebox",
              data:values
            }).then((res)=>{
              console.log(res);
              this.form.resetFields();
            })
          }
        })

        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 2000);
      },
      handleCancel(e) {
        console.log('Clicked cancel button');
        this.visible = false;
      },
      //题片上传确定
      /*handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
          this.filename = info.file.name;
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败.`);
        }
      },*/
    },
  };
</script>